import styled from 'styled-components'

export const BannerWrapper = styled.div`
    position: relative;

    .banner {
        display: flex;
        padding: 0 calc((100% - 980px) / 2);
        position: relative;
    }

    .banner-bottom {
        width: 100vw;
        height: 285px;
        position: absolute;
        top: 0;
        z-index: -1;
        transition: background-image 0.5s ease-in-out; /* 添加过渡效果 */
    }
`

export const BannerLeft = styled.div`
    width: 730px;

    .item {
        height: 285px;
        cursor: pointer;
        object-fit: fill;

        img {
            width: 100%; /* 让图片宽度充满容器 */
            height: 100%; /* 设置高度 */
            object-fit: cover;
        }
    }
`

export const BannerRight = styled.a.attrs({
    href: 'https://music.163.com/#/download',
    target: '_blank'
})`
    width: 254px;
    height: 285px;
    background-image: url('/images/download.png'); /* 精灵图的路径 */
    background-repeat: no-repeat; /* 不重复 */
    overflow: hidden;
`

export const BannerControl = styled.div`
    .btn-left {
        width: 37px;
        height: 63px;
        background-image: url('/images/banner.png');
        background-position: 0 300px;
        position: absolute;
        top: 111px;
        left: calc((100% - 1100px) / 2);
        cursor: pointer;
        border: none;

        &:hover {
            background-position: 0 230px;
        }
    }

    .btn-right {
        width: 37px;
        height: 63px;
        background-image: url('/images/banner.png');
        background-position: 0 150px;
        position: absolute;
        top: 111px;
        right: calc((100% - 1100px) / 2);
        cursor: pointer;
        border: none;

        &:hover {
            background-position: 0 80px;
        }
    }
`
